import dash_bootstrap_components as dbc
from dash import html, Input, Output, State
from server import app

collapse_html = html.Div(
    [
        html.Br(),
        html.P(html.Strong('使用Collapse组件切换应用程序中内容的可见性', style={'color': 'rgb(255, 153, 51)'})),
        html.Br(),
        dbc.Button('展示/隐藏', color='primary', id='collapse_btn', className="me-1", n_clicks=0),
        html.Hr(),
        dbc.Collapse(
            dbc.Card('这个是Collapse内容的展示', body=True),
            id='collapse',
            is_open=True,
        )
    ]
)

@app.callback(
    Output('collapse', 'is_open'),
    [Input('collapse_btn', 'n_clicks')],
    [State('collapse', 'is_open')]
)
def toggle(n, is_open):
    return not is_open